<template>
    <div class="RadarMusic">
        <h1>{{user}}的雷达歌单</h1>
        <p>根据你的红心收藏为你推荐更多的宝藏歌曲</p>
        <div class="checkBox">
            <button class="fa fa-chevron-left" @click="left"></button>
            <button class="fa fa-chevron-right" @click="right"></button>
        </div>
        <article>
            <div class="main">
                <div class="Radar" v-for="item in num" :key="item">
                    <div class="img">
                        <img>
                        <i class="fa fa-play"></i>
                        <i class="fa fa-play-circle-o">收听人数</i>
                    </div>
                    <span>
                        <p>
                            雷达歌单雷达歌单雷达歌单雷达歌单雷达歌单雷达歌单雷达歌单雷达歌单雷达歌单雷达歌单雷达歌单
                        </p>
                    </span>
                </div>
            </div>
        </article>
    </div>
</template>

<script>
export default {
    name:'RadarMusic',
    data() {
        return {
            user:"用户",
            num:10,
            speed:0
        }
    },
    methods: {
        left(e) {
            // this.function()
            let main = document.getElementsByClassName('main')[0]
            let divs = main.getElementsByClassName('Radar')  
            main.style.width=divs[0].offsetWidth*divs.length+"px"
            if(main.style.left==="0px") {
                e.path[0].disabled = true
                this.speed += divs[0].offsetWidth+20
            }else {
                e.path[0].disabled = false
                this.speed += (divs[0].offsetWidth+20)*2
            }
            main.style.left = this.speed+'px'
        }, 
        right(e) {
            // this.function()
            let main = document.getElementsByClassName('main')[0]
            let divs = main.getElementsByClassName('Radar')
            main.style.width=(divs[0].offsetWidth+20)*divs.length+"px"
            if(main.style.left==="-896px") {
                e.path[0].disabled = true
                this.speed -= divs[0].offsetWidth+20
            }else {
                e.path[0].disabled = false
                this.speed -= (divs[0].offsetWidth+20)*2
            }
            main.style.left = this.speed+'px'
        }
    }
}
</script>

<style lang="scss" scoped>
@import './RadarMusic.scss'
</style>
